<template>
<view>
<button class="activityDataBtn" @click.stop="promotionTaskQrcode(taskObj)"> 分享 </button>
		<canvas class="f__canvas" style="width:650px;height:812px;position: absolute;top: -812px;z-index: -1000;zoom: 2%;" v-show="!canvasImg" canvas-id="firstCanvas"
			id="firstCanvas"></canvas>
			
			
		<u-popup :show="show" mode="center" width="650rpx">
			<view class="shareContent">
				<image :src="canvasImg" mode="" :show-menu-by-longpress="true"></image>
			</view>
			<view class="shareBtnContent">
				<!-- <view class="btn">
					<image :src="link" mode=""></image>
					<text>微信好友</text>
				</view>
				<view class="btn">
					<image :src="weChat" mode=""></image>
					<text>朋友圈海报</text>
				</view> -->
				<view class="btn" @click="onSaveImg">
					<text>保存图片</text>
				</view>
				<view class="btn" @click="onSaveImg">
					<text>长按保存或发送给好友</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import _canvas from '@/uni_modules/fan-canvas/canvasUtils';
	import {
		saveImg,
		qrcodeCanvas
	} from '@/uni_modules/fan-canvas/plugins/utils';
	import * as api from '@/api/activity.js';
	export default {
		data() {
			return {
				show:false,
				goodsImg: '',
				canvasImg: '', //生成的海报图片
				qrcodeImg: '', //二维码本地图片
			}
		},
		onLoad() {

		},
		methods: {
			promotionTaskQrcode() {
				api.getQrcode({
					activityId: "ACT1658976198692",
					url: "pages/activity/activity-detail"
				}).then(res => {
					this.goodsImg = "https://qykh.shopec.com.cn/image-server/upload/2022/07/27/caa4ea25-dfc7-4a1c-a71b-44a624edeaae.jpeg";
					this.qrcodeImg = "https://qykh.shopec.com.cn/image-server/" + res.data;
					this.createGoodsPoster();
				})
			},
			//绘制海报
			async createGoodsPoster() {
				var that = this;
				uni.showLoading({
					title: '海报生成中'
				});
				const cvsW = 650;
				const cvsH = 810;
				const goodsH = 570;
				const logo_w = 100;
				const margin = 30;
				let family =
					" 'PingFang SC',tahoma,arial,'helvetica neue','hiragino sans gb','microsoft yahei',sans-serif";
				let ctx = uni.createCanvasContext('firstCanvas');
				// 绘制矩形
				_canvas.fillRoundRect(ctx, 0, 0, cvsW, cvsH, 20, "#ffffff");
				// 同步加载图片
				var logo = await _canvas.getImageInfo(this.goodsImg);
				if (logo.path) {
					// save+clip+restore:防止图片超出边框显示--相当于overflow: hidden;
					ctx.save();
					ctx.clip(); //剪切--不允许超出矩形框
					// 绘制商品图片
					_canvas.drawImgCover(ctx, logo, 0, 0, cvsW, goodsH);
					ctx.restore();
					
				
				
				
				
					// 简介-多行文字
					ctx.setFillStyle('#333333')
					ctx.textAlign = 'left';
					var options = {
						font: "normal 28px" + family, //设置字体
						ctx: ctx,
						word: "123", //文本
						maxWidth: 310, //最大宽度
						maxLine: 2, //最大行数--超出省略
						x: 40, //x坐标
						y: 680, //y坐标
						l_h: 40 //行高
					}
					// 文本自定义换行
					_canvas.dealWords(options)
				
					// 绘制二维码
					var qrcodeImg = await _canvas.getImageInfo(that.qrcodeImg);
					ctx.drawImage(qrcodeImg.path, 410, 605, 180, 180);
					// 绘制图片
					ctx.draw(false, function() {
						uni.canvasToTempFilePath({
							width: cvsW,
							height: cvsH,
							canvasId: 'firstCanvas',
							success(res) {
								uni.hideLoading();
								that.canvasImg = res.tempFilePath
								that.show = true
							}
						}, that)
					}, 500)
				} else {
					uni.hideLoading();
					uni.showToast({
						title: '海报制作失败',
						icon: 'none'
					});
				}
			},
			// 保存图片
			async onSaveImg() {
				let imgUrl = "";
				if (this.canvasImg) {
					imgUrl = await this.canvasImg;
					saveImg(imgUrl)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topWrapper {
		background: #f5f5f5;
		width: 100%;
	}

	.tab-wrapper {
		width: 100%;
		background: linear-gradient(0deg, #f5f5f5 60%, #e5f0ff 100%);
		padding: 20rpx;

		.statistical {
			padding: 0 50rpx;
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Medium;
			font-weight: 500;
			text-align: left;
			color: #333333;
			line-height: 64rpx;
			letter-spacing: 0.55rpx;

		}
	}

	/deep/ .u-content {
		background: #ffffff !important;

	}

	/deep/ .u-content input {
		background: #ffffff !important;
	}

	.contentBox {
		border-top: 1px solid #ebebeb;
		margin: 0 20rpx;
		border-radius: 0;
		padding: 30rpx 20rpx;
	}

	.contentBox:last-child {
		border-radius: 0 0 16rpx 16rpx;
	}

	.status-wrapper {
		width: 710rpx;
		height: 78rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		margin: 0px auto;
		font-size: 26rpx;
		font-weight: 500;
		color: #333333;
		display: flex;
		align-items: initial;
		justify-content: flex-start;

		view {
			width: 20%;
			height: 100%;
			text-align: center;
			line-height: 78rpx;
		}

		.active {
			color: #177fff;
		}
	}

	/deep/ .empty-icon {
		display: inline-table;
	}

	/deep/.u-mode-center-box {
		background-color: transparent !important;
	}

	.info {
		margin: 16rpx 0;
		position: relative;

		.arrow {
			position: absolute;
			top: 0;
			right: 10rpx;
		}
	}

	.footer {}

	.shareContent {
		width: 650rpx;
		height: 812rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

	}

	.shareBtnContent {
		margin-top: 20rpx;
		padding: 0 25rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.btn {
			display: flex;
			align-items: center;
			flex-direction: column
		}

		text {
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			padding: 0 16rpx;
			font-size: 26rpx;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.cancle {
		margin: 0 5%;
		background-color: blueviolet;
		width: 90%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		color: #fff;
	}

	.contentBox .activityType {
		width: 105rpx;
		height: 45rpx;
		background: #ec4863;
		font-size: 20rpx;
		text-align: center;
		color: #ffffff;
		padding: 10rpx;
		line-height: 26rpx;
		margin-right: 20rpx;
		margin-left: 0rpx;
	}

	.contentBox .businessName {
		width: 440rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		font-size: 26rpx;
		line-height: 42rpx;
	}

	.arrow-left {
		display: flex;
		justify-content: flex-start;
		width: 600rpx;
	}

	.activityTime {
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC-Medium;
		font-weight: 500;
		text-align: left;
		color: #666666;
		line-height: 13rpx;
		letter-spacing: 0.45rpx;
	}

	.quantity-statistics {
		font-size: 22rpx;
		font-weight: 700;
		text-align: left;
		color: #333333;
		line-height: 23rpx;

		image {
			width: 23rpx;
			height: 23rpx;
			margin-right: 10rpx;
		}

		.item {
			width: 120rpx;
			display: flex;
			justify-content: flex-start;
		}
	}

	.activityDataBtn {
		width: 140rpx;
		height: 46rpx;
		border: 1px solid #999999;
		border-radius: 24rpx;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
		color: #333333;
		line-height: 40rpx;
		padding: 0;
		margin: 0;

	}
	
	/deep/ .mescroll-body .mescroll-render-touch{
		min-height: calc(100vh - 210px) !important;
	}
</style>
